<div class="login-container">

  <mat-card>
    <mat-card-title *ngIf="types">
      <div class="login-page-header">
        <div class="login-logo">
          <img src="assets/images/homerseven.png" alt="Homer">
        </div>
        <p class="login-head"
          *ngIf="!translateError">
          {{ 'login.header' | translate }}
        </p>
      </div>
    </mat-card-title>

    <mat-card-content ngClass="login-form"
      *ngIf="isReady">
      <form [formGroup]="loginForm"
        (ngSubmit)="onSubmit()"
        *ngIf="types && !translateError && !typesError">


        <input type="text"
          autocomplete="username"
          [placeholder]="'login.username' | translate"
          name="username"
          required
          formControlName="username"
          class="form-control" />


        <input class="form-control"
          autocomplete="current-password"
          type="password"
          [placeholder]="'login.password' | translate"
          (keydown)="onCapsLock($event)"
          (keyup)="onCapsLock($event)"
          formControlName="password"
          required />


        <p *ngIf="error"
          class="error">
          {{ error }}
        </p>

        <div class="input-group mb-3"
          *ngIf="enabledTypes && enabledTypes.length > 1">
          <div class="input-group-prepend">
            <label class="input-group-text">{{ 'login.authentication' | translate }}</label>
          </div>
          <select class="custom-select"
            formControlName="type"
            [(value)]="type">
            <option *ngFor="let type of types"
              value="{{ type.type }}">
              {{ type.name}}
            </option>
          </select>
        </div>

        <button mat-flat-button
          class="login-submit">{{ 'login.signInButton' | translate }}</button>
        <span class="oauth-wrapper" *ngIf="oAuthTypes?.length > 0"
        [style.min-height.px]="oAuthTypes?.length > 5 ? 100 : 50"
        [style.max-height.px]="oAuthTypes?.length > 5 ? 100 : 50"
        >
            <span class="oauth-button-wrapper" *ngFor="let type of oAuthTypes">
                <button mat-flat-button class="oauth-submit"
                [style.background-color]="type.color || 'hsl(0, 0%, 50%)'"
                (click)='goOauth(type)'
                >
                    <fa-icon *ngIf="type.provider_name && !type.provider_image" [icon]="['fab', type.provider_name]"></fa-icon>
                    <img *ngIf="type.provider_image" [src]="type.provider_image" width="20" height="20">
                </button>
            </span>
        </span>
      </form>
      <!-- <ng-template #noApiResponse> -->
      <div *ngIf="typesError && !translateError"
        style="
            max-width: 250px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            display: grid;
            align-items: center;
            height: 250px;
          ">
        <div style="text-align: center">
          <mat-icon style="
                color: rgb(155, 155, 155);
                height: 70px;
                width: 70px;
                font-size: 70px;
              ">error_outline</mat-icon>
        </div>

        <h3 style="color: black; font-weight: lighter">{{ "login.error.apiNotFound.header" | translate }}</h3>
        <p style="color: grey">
          {{ "login.error.apiNotFound.message" | translate }}
        </p>
      </div>
      <div *ngIf="translateError"
        style="
          max-width: 250px;
          margin: 0 auto;
          text-align: center;
          padding: 20px;
          display: grid;
          align-items: center;
          height: 250px;
        ">
        <div style="text-align: center">
          <mat-icon style="
          color: rgb(155, 155, 155);
          height: 70px;
          width: 70px;
          font-size: 70px;
        ">error_outline</mat-icon>
        </div>

        <h3 style="color: black; font-weight: lighter">Translation File Error</h3>
        <p style="color: grey">
          Please Contact Customer Service
        </p>
      </div>
      <!-- </ng-template> -->
    </mat-card-content>
  </mat-card>
  <footer class="homer-footer">{{ 'login.copyright' | translate }}</footer>
</div>
